<template>
  <div class="app-container bg-white" v-loading="loading">
    <!-- 页面内容 -->
    <div class="page-body">
      <el-form :model="queryForm" :inline="true" ref="queryFormRef" size="small" @submit.native.prevent>
        <el-form-item>
          <el-input size="small" placeholder="请输入售后单号" v-model.trim="queryForm.returnNo" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" placeholder="请输入订单号" v-model.trim="queryForm.orderNo" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select size="small" placeholder="请选择售后类型" v-model="queryForm.type" clearable>
            <el-option v-for="item in serviceDataList" :key="'type' + item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select size="small" placeholder="请选择售后状态" v-model="queryForm.status" clearable>
            <el-option v-for="item in serviceStatusList" :key="'status' + item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select size="small" placeholder="请选择退款原因" v-model="queryForm.reason" clearable>
            <el-option v-for="item in refundReasonsList" :key="'reason' + item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker size="small" v-model="queryTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="'yyyy-MM-dd'"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input size="small" placeholder="请输入商品名称" v-model.trim="queryForm.goodsName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" placeholder="请输入店铺名称" v-model.trim="queryForm.storeName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small" placeholder="请输入会员名称" v-model.trim="queryForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" class="width_104" type="primary" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="text-right">
        <el-button size="mini" type="primary" icon="el-icon-download" @click="outputStoreOption()">批量导出</el-button>
      </div>
      <el-table class="margin_top_20" stripe :data="pageData" :header-cell-style="tableHeaderStyle" row-key="id" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="orderChannel" label="订单渠道">
          <template slot-scope="scope">
                  <span>{{ scope.row.orderChannel | channelFilter }}</span>
            <!-- <el-switch @change="changeStatus($event, scope.row)" :value="scope.row.checkStatus == 0"></el-switch> -->
          </template>
        </el-table-column>
        <el-table-column prop="returnNo" label="售后单号"></el-table-column>
        <el-table-column prop="orderNo" label="订单号">
          <!-- <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.roleName">{{scope.row.roleName}}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="storeName" label="店铺名称"></el-table-column>
        <el-table-column prop="username" label="用户昵称"></el-table-column>
        <el-table-column prop="consigneeName" label="收货人姓名"></el-table-column>
        <el-table-column prop="consigneePhone" label="收货人手机号"></el-table-column>
        <el-table-column prop="status" label="售后状态">
              <template slot-scope="scope">
                  <span>{{ scope.row.status | statusFilter }}</span>
            <!-- <el-switch @change="changeStatus($event, scope.row)" :value="scope.row.checkStatus == 0"></el-switch> -->
          </template>
        </el-table-column>
        <el-table-column prop="payMoney" label="订单金额">
          <template slot-scope="scope">
                  <span>￥{{ scope.row.payMoney | nomoney }}</span>
            <!-- <el-switch @change="changeStatus($event, scope.row)" :value="scope.row.checkStatus == 0"></el-switch> -->
          </template>
        </el-table-column>
        <el-table-column prop="returnSubmitTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <!-- v-if="roleBtns.includes('sys:user:remove') || $store.getters.isAdmin" -->
            <button class="my-btn my-btn--mini plain" @click="goDetail(scope.row.id)">查看</button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/settings';
import { mapGetters } from 'vuex';
import { getAftermarketList } from '@/views/order-management/services/index';
import PowerForm from '@/views/user-management/components/powerForm';

export default {
  components: {
    PowerForm,
  },
   filters: {
     nomoney(val) {
        if (!val) {
           return '0.00';
        }
        else {
           return Number(val).toFixed(2);
        }
        },
    statusFilter(val) {
      switch(val) {
          case 1:
            return  "待审核"
            break;
          case 2:
            return  "审核通过"
            break;
          case 3:
            return  "审核驳回"
            break;
          case 4:
            return  "用户已发货"
            break;
          case 5:
            return  "收到退货"
            break;
          case 6:
            return  "重新发货"
            break;
          case 7:
            return  "售后完成"
            break;
          case 8:
            return  "已取消"
            break;
          default:
            return  "审核驳回"
        }
    },
    channelFilter(val) {
      switch(val) {
          case 1:
            return  "懂衣"
            break;
          case 2:
            return  "洗e先生"
            break;
          case 3:
            return  "三翼鸟阳台场景"
            break;
      }
    }
  },
  data() {
    return {
      title: '',
      queryTime: [],
      queryForm: {
        returnNo: '',
        orderNo: '',
        orderChannel: '',
        name: '',
        mchName: '',
        goodsName: '',
        storeName: '',
        type: null,
        reason: null,
        status: null
      },
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      pageCount: 0,
      loading: false,
      isShowModel: false,
      isShowPowerModel: false,
      isShowChangeModel: false,
      multipleSelection: [],
      serviceDataList: [
        { value: '1', label: '换货' },
        { value: '2', label: '退款退货' },
        { value: '3', label: '仅退款' },
        { value: '4', label: '补发' }
      ], //售后类型
      serviceStatusList: [
        { value: '1', label: '待审核' },
        { value: '2', label: '审核通过' },
        { value: '3', label: '审核驳回' },
        { value: '4', label: '用户已发货' },
        { value: '5', label: '收到退货' },
        { value: '6', label: '重新发货' },
        { value: '7', label: '售后完成' },
        { value: '8', label: '已取消' }
      ], //售后状态
       refundReasonsList: [
        { value: '1', label: '商品与页面描述不符' },
        { value: '2', label: '不合适' },
        { value: '3', label: '质量问题' },
        { value: '4', label: '少/错商品' },
        { value: '5', label: '买错/买多' },
        { value: '6', label: '不喜欢/无理由' },
        { value: '7', label: '取消订单失败' },
        { value: '8', label: '价格变化' },
        { value: '9', label: '商品损坏/包装脏污' },
        { value: '0', label: '其他' },
      ],//退款原因
      editMemberId: null,
      editUserType: 0,
      parentIds: [],
      searchData: null
    }
  },
  watch: {
    currentNode: {
      immediate: true,
      handler: function (newValue) {
        if (!newValue) return;
        
      }
    }
  },
  created() {
    this.getPageDataList();
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  methods: {
    configOption(rowData) {
      this.title = rowData.name;
      this.editUserType = rowData.type;
      this.editMemberId = rowData.id;
      this.isShowPowerModel = true;
    },
    removeDepartChildOption(nodeIds) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            RemoveUser({ userIds: nodeIds })
              .then(data => {
                instance.confirmButtonLoading = false;
                if (data.code == 200) {
                  this.$message.success('删除成功!');
                  done()
                } else {
                  this.$message.success('删除失败!');
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false;
              })
          } else {
            done();
          }
        }
      }).then(() => {
        this.getPageDataList();
      })
    },
    // 批量导出功能
    outputStoreOption() {
      this.loading = true;
      this.searchData.targetIds = this.multipleSelection
      this.blobAxiosApi('get', '/cloudApi/order/orderReturn/exportOrderReturnList', this.searchData, '售后订单导出文件.xlsx')
      .finally(() => this.loading = false)
    },
    
    //查看详情
    goDetail(rowId) {
            this.$router.push({
                name: 'AfterSaleDetail',
                query: { id: rowId }
            })
        },
    handleSelectionChange(selectlist) {
      let multipleSelectionIds = selectlist.map(item => {
        return item.id
      })
      this.multipleSelection = multipleSelectionIds.join(",")
    },
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    },
    getPageDataList() {
      this.loading = true;
      const queryData = {
        startTime: this.queryTime && this.queryTime[0] ? this.queryTime[0] : '',
        endTime: this.queryTime && this.queryTime[1] ? this.queryTime[1] : '',
        returnNo: this.queryForm.returnNo,//售后单号
        orderNo: this.queryForm.orderNo,//订单编号
        orderChannel: this.queryForm.orderChannel,//订单渠道
        name: this.queryForm.name,//会员名
        mchName: this.queryForm.mchName,//商户名
        goodsName: this.queryForm.goodsName,//商品名
        storeName: this.queryForm.storeName, //店铺名
        type: this.queryForm.type, //售后类型
        reason: this.queryForm.reason, //原因
        status: this.queryForm.status, //售后状态
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      }
      this.searchData = JSON.parse(JSON.stringify(queryData));
      getAftermarketList({...queryData})
        .finally(() => (this.loading = false))
        .then(data => {
          if (data.code == 200) {
            this.pageData = (data.data.list && data.data.list.length) ? data.data.list.map(item => {
              if (item.userType == 3) {
                if (item.isMch == 1 && item.isStore == 0) {
                  item.type = 1;
                } else if (item.isMch == 0 && item.isStore == 1) {
                  item.type = 2;
                } else if (item.isMch == 1 && item.isStore == 1) {
                  item.type = 3;
                }
              } else {
                item.type = item.userType;
              }
              return item;
            }) : [];
            this.pageCount = data.data.total;

            if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1;
              this.getPageDataList();
            }
          }
        })
    },
    resetOption() {
      this.queryForm.returnNo = '';
      this.queryForm.orderNo = '';
      this.queryForm.orderChannel = '';
      this.queryForm.name = '';
      this.queryForm.mchName = '';
      this.queryForm.goodsName = '';
      this.queryForm.storeName = '';
      this.queryForm.type = null;
      this.queryForm.reason = null;
      this.queryForm.status = null;
      this.queryTime = [];
      this.getPageDataList();
    }
  }
}
</script>

<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
</style>
